<script lang="ts" setup>
import CalcResult from "./calc-result.vue"
import type { IEquipmentInfo } from "@/api/info/type";
import { useBasicInfoStore, useConfigStore } from "@/store";

const equTabs = [
  { id: 1, label: "属性" },
  { id: 2, label: "防具" },
  { id: 3, label: "首饰" },
  { id: 4, label: "特殊" },
  { id: 5, label: "其他" }
];

const selectMode = ref(true);

const currentTab = ref(1);

const basicStore = useBasicInfoStore();
const configStore = useConfigStore();

const curEqu = ref(0)
const randomSelector = ref<HTMLElement>()

const positions = computed(() => {
  let positions: string[] = [];
  switch (currentTab.value) {
    case 2:
      positions = ["上衣", "头肩", "腰带", "下装", "鞋"];
      break;
    case 3:
      positions = ["手镯", "项链", "戒指"];
      break;
    case 4:
      positions = ["辅助装备", "魔法石", "耳环"];
      break;
    case 5:
      positions = ["武器", "称号", "宠物"];
      break;
  }

  return positions;
});

const complete = (data: any[], count: number = 8) => {
  const num = data.length == 0 ? count : count - (data.length % count || count);
  return [...data, ...Array(num).fill({})];
};

const curPartEqus = (part: string, type: number) => {
  if (["称号", "宠物"].includes(part) && type > 0 && type < 3) {
    return []
  }
  switch (type) {
    // 固定装备
    case 0:
      return complete(
        basicStore.equipment_list.filter(
          (a) => a.part == part && a.alternative.length == 0
        ) ?? []
      ) as IEquipmentInfo[];
    // 自定义装备
    case 1:
      return complete(
        basicStore.equipment_list.filter(
          (a) => a.part == part && a.alternative.length > 0
        ) ?? []
      ) as IEquipmentInfo[];
    // 贴膜
    case 2:
      return complete(
        [...(basicStore.equipment_info?.fusion?.filter((a) => a.part == part) ?? [])
        // ,...(basicStore.equipment_info?.merge?.filter((a) => a.part == part) ?? [])
        ]
      ) as IEquipmentInfo[];
    // 空行
    case 3:
      return complete([]);
    default:
      return [];
  }
};

const chooseEqu = (equ: IEquipmentInfo, toggle = false, onlyInfo = false) => {
  if (!equ) {
    return
  }
  if (selectMode.value && currentTab.value != 1 && !onlyInfo) {
    if (equ.type?.includes("融合")) {
      const id = equ.id as number
      const list = basicStore.equipment_info?.fusion ?? []
      if (configStore.fusion_list.includes(id)) {
        configStore.fusion_list.splice(configStore.fusion_list.indexOf(id), 1)
      } else {
        // 移除同部位
        const cur_position = list.filter(a => a.id == id)?.[0].part
        const to_remove = list.filter(item => item.part == cur_position) ?? []
        to_remove.forEach(a => {
          if (configStore.fusion_list.includes(a.id as number)) {
            configStore.fusion_list.splice(configStore.fusion_list.indexOf(a.id as number), 1)
          }
        })
        configStore.fusion_list.push(id)
      }
    } else {
      configStore.addSingle(equ.id, toggle)
      if ((equ.alternative?.length > 0 || equ.part == "武器") && configStore.single_set.includes(equ.id)) {
        curEqu.value = equ.id as number
        randomSelector.value?.showDrawer()
      }
    }
  } else {
    const url = `/pages/equipment/equip/equip?id=${equ.id}`
    uni.navigateTo({
      url
    })
  }
}


const curEquList = computed(() => {
  return basicStore.equipment_list.filter(item => configStore.single_set.includes(item.id)).sort((a, b) => Number(a.id) - Number(b.id))
})

const fusionEquList = computed(() => {
  const weapon = curEquList.value.find(a => a.part == "武器")
  let weapon_fusion: IEquipmentInfo | undefined
  if (weapon) {
    const count = (configStore.merge[weapon.id?.toString() ?? 0] ?? []).filter(a => a > 0)?.length ?? 0
    if (count > 0) {
      weapon_fusion = basicStore.equipment_info?.merge.find(a => a.type == weapon.type)
    }
  }
  return weapon_fusion ? [weapon_fusion, ...(basicStore.equipment_info?.fusion?.filter(item => configStore.fusion_list.includes(item.id)).sort((a, b) => Number(a.id) - Number(b.id)) as IEquipmentInfo[])] : basicStore.equipment_info?.fusion?.filter(item => configStore.fusion_list.includes(item.id)).sort((a, b) => Number(a.id) - Number(b.id)) as IEquipmentInfo[];
})
</script>

<template>
  <view class="top-panel">
    <EqPanel
      ref="EqPanel"
      :eqs="curEquList"
      class="eq-panel-item"
      :can-click="selectMode"
      :fusion="fusionEquList"
      with-data
      @click-equ="chooseEqu"
    />
  </view>
  <view class="select-eqs">
    <form-tabs v-model:value="currentTab" class="eq-types" :tabs="equTabs" />
    <view v-if="currentTab == 1">
      <CalcResult />
    </view>
    <view v-if="currentTab > 1" class="params">
      <view class="flex items-center">
        <text :class="{ selected: !selectMode }" @tap="selectMode = !selectMode">
          查看模式
        </text>
        <switch :checked="selectMode" color="#FFCC33" style="transform: scale(0.6)" @change="selectMode = !selectMode" />
        <text :class="{ selected: selectMode }" @tap="selectMode = !selectMode">
          选择模式
        </text>
      </view>
    </view>
    <view>
      <view v-for="part in positions" :key="part" class="eqs">
        <!-- 固定装备 -->
        <view style="display: flex; flex-wrap: wrap; width: 100%">
          <template v-for="type in 4">
            <view v-for="(eq, index) in curPartEqus(part, type - 1)" :key="type + index" class="eq-item-box">
              <eq-icon
                :show-tips="!selectMode"
                :active="configStore.single_set.includes(eq.id) || configStore.fusion_list.includes(eq.id)" class="eq-item" :eq="eq" not-use-island
                @tap="chooseEqu(eq, false)"
              />
            </view>
          </template>
        </view>
      </view>
    </view>
  </view>
  <eq-random-selector ref="randomSelector" :eid="curEqu" />
</template>

<style lang="scss" scoped>
.params {
  font-size: 13px;
  color: #888;
  display: flex;
  width: calc(100% - 30px);
  justify-content: space-between;
  margin-bottom: 5px;

  .selected {
    color: #ffcc33;
  }

  .role-selector {
    color: #000;
    position: absolute;
    right: 20px;
  }
}

.top-panel {
    position: relative;

    .btn {
      width: 90px;
    }
  }

.eqs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  .eq-item-box {
    position: relative;
    width: calc(100% / 8);

    &.without-tips:hover {
      &:after {
        content: "";
        position: absolute;
        width: 32px;
        height: 32px;
        border: 2px solid #23aaf2;
        left: 0;
        right: 0;
      }
    }
  }

  .eq-item {
    position: relative;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 2px;
  }
}
</style>
